<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="rest.css">
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="banner-nav">
        <!-- 导航栏 -->
        <div class="nav-head">
            <!-- 左上角logo图标 -->
            <a class="nav-logo" href="https://www.mi.com/">
                <img class="logo-img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png"
                    alt="">
            </a>
            <!-- 导航中心 -->
            <ul class="nav-c">
                <li class="c-list">
                    <a href="#" class="list-iteam">小米手机</a>
                </li>
            </ul>
            <li class="c-list">
                <a href="#" class="list-iteam">红米手机</a>
            </li>
            </ul>
            <li class="c-list">
                <a href="#" class="list-iteam">电视</a>
            </li>
            <li class="c-list">
                <a href="#" class="list-iteam">笔记本</a>
            </li>
            <li class="c-list">
                <a href="#" class="list-iteam">平板</a>
            </li>
            <li class="c-list">
                <a href="#" class="list-iteam">家电</a>
            </li>
            <li class="c-list">
                <a href="#" class="list-iteam">路由器</a>
            </li>
            <li class="c-list">
                <a href="#" class="list-iteam">服务中心</a>
            </li>
            <li class="c-list">
                <a href="#" class="list-iteam">社区</a>
            </li>
            </ul>

            <div class="nave-search">
                <input class="search-box" type="text">
                <input class="search-bton" type="button" value="">
            </div>

        </div>

        <!-- 中间巨幕banner部分 -->
        <div class="banner">
            <!-- banner左侧分类 -->
            <ul class="banner-category">
                <!-- banner列表 -->
                <li class="category-list category-list-01">
                    <a href="#" class="link-list-iteam">
                        手机
                        <span class="link-list-arr">&gt;</span>
                    </a>
                </li>
                <li class="category-list">
                    <a href="#" class="link-list-iteam">
                        电视
                        <span class="link-list-arr">&gt;</span>
                    </a>
                </li>
                <li class="category-list">
                    <a href="#" class="link-list-iteam">
                        家电
                        <span class="link-list-arr">&gt;</span>
                    </a>
                </li>
                <li class="category-list">
                    <a href="#" class="link-list-iteam">
                        笔记本 平板
                        <span class="link-list-arr">&gt;</span>
                    </a>
                </li>
                <li class="category-list">
                    <a href="#" class="link-list-iteam">
                        出行 穿戴
                        <span class="link-list-arr">&gt;</span>
                    </a>
                </li>
                <li class="category-list">
                    <a href="#" class="link-list-iteam">
                        耳机 音箱
                        <span class="link-list-arr">&gt;</span>
                    </a>
                </li>
                <li class="category-list">
                    <a href="#" class="link-list-iteam">
                        健康 儿童
                        <span class="link-list-arr">&gt;</span>
                    </a>
                </li>
                <li class="category-list">
                    <a href="#" class="link-list-iteam">
                        生活 箱包
                        <span class="link-list-arr">&gt;</span>
                    </a>
                </li>
                <li class="category-list">
                    <a href="#" class="link-list-iteam">
                        智能 路由器
                        <span class="link-list-arr">&gt;</span>
                    </a>
                </li>
                <li class="category-list">
                    <a href="#" class="link-list-iteam">
                        电源 配件
                        <span class="link-list-arr">&gt;</span>
                    </a>
                </li>
            </ul>

            <!-- 右侧巨幕部分 -->
            <div class="banner-right">
                <!-- 箭头 -->
                <div class="arr-banner-right">
                    <a class="left-arr" href="https://www.mi.com/shop" target="_self"></a>
                    <a class="right-arr" href="https://www.mi.com/shop" target="_blank"></a>
                </div>
                <!-- 右下角小点 -->
                <ul class="banner-right-dot">
                    <li class="dot-list"></li>
                    <li class="dot-list"></li>
                    <li class="dot-list"></li>
                    <li class="dot-list"></li>
                    <li class="dot-list"></li>
                    <li class="dot-list"></li>
                    <li class="dot-list"></li>
                </ul>
            </div>


        </div>


        <!-- 下部售后服务及旗舰手机推荐 -->
        <div class="banner-serves">
            <ul class="banner-afterserves">
                <li class="afterserves-list">
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                        class="link-afterserves">
                        <img class="afterserves-logo" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="">
                        保障服务
                    </a>
                </li>
                <li class="afterserves-list">
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                        class="link-afterserves">
                        <img class="afterserves-logo" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
                        企业团购
                    </a>
                </li>
                <li class="afterserves-list">
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                        class="link-afterserves">
                        <img class="afterserves-logo" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="">
                        F码通道
                    </a>
                </li>
                <li class="afterserves-list">
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                        class="link-afterserves">
                        <img class="afterserves-logo" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="">
                        米粉卡
                    </a>
                </li>
                <li class="afterserves-list">
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                        class="link-afterserves">
                        <img class="afterserves-logo" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="">
                        以旧换新
                    </a>
                </li>
                <li class="afterserves-list">
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                        class="link-afterserves">
                        <img class="afterserves-logo" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">
                        话费充值
                    </a>
                </li>
            </ul>
            <!-- 旗舰手机推荐 -->
            <div class="superphone-area">
                <ul class="banner-superphone">
                    <li class="superphone-list">
                        <a href="#" class="link-superphone">
                            <img class="img-superphone" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cf5e958bc88727b50c5c5fba7a8f47a.jpg?w=632&h=340" alt="" >
                        </a>
                    </li>
                    <li class="superphone-list">
                        <a href="#" class="link-superphone">
                            <img class="img-superphone" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6dd2f3e0de4e6cbba98fd3799cfa5bf7.jpg?w=632&h=340" alt="" >
                        </a>
                    </li>
                    <li class="superphone-list">
                        <a href="#" class="link-superphone">
                            <img class="img-superphone" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7d4be1a9e701e16de498f89b1865867.jpg?w=632&h=340" alt="" >
                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </div>

</body>

</html>
